<template>
<el-card shadow="never" class="aui-card--fill">
    <div class="mod-sys__dict">
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
            <el-form-item>
                <el-select v-model="dataForm.orderStatus" placeholder="客房状态" clearable>
                    <el-option :value="item.val" v-for="item in roomStatus" :key="item.val" :label="item.label">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-date-picker v-model="dataForm.startDate" type="date" value-format="yyyy-MM-dd" placeholder="开始时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-date-picker v-model="dataForm.endDate	" type="date" value-format="yyyy-MM-dd" placeholder="结束时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button @click="getDataList()">{{ $t("query") }}</el-button>
            </el-form-item>
        </el-form>
        <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" height="calc(100vh - 250px)" @sort-change="dataListSortChangeHandle" style="width: 100%">
            <el-table-column type="expand">
                <template slot-scope="scope">
                      <el-form label-position="left" class="demo-table-expand" style="padding-left:80px">
                        <el-row v-for="sub in scope.row.otherData" :key="sub.projectName">
                            <el-col :span="5">
                                <el-form-item label="消费项目:" style="margin:0">
                                    <span>{{ sub.projectName }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="数量:" style="margin:0">
                                    <span>{{ sub.num }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="价格:" style="margin:0">
                                    <span>{{ sub.defaultPrice}} / {{sub.unit}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        </el-form>
                </template>
            </el-table-column>
            <el-table-column prop="orderCode" label="订单编号" header-align="center" min-width="150" align="center"></el-table-column>
            <el-table-column prop="roomNumber" label="房号" min-width="120px" sortable="custom" header-align="center" align="center"></el-table-column>
            <el-table-column prop="otherAmount" label="其他消费/支出 金额" sortable="custom" header-align="center" align="center" min-width="150"></el-table-column>
            <!-- <el-table-column prop="arriveDate" label="到达时间" header-align="center" align="center" width="180"></el-table-column>
            <el-table-column prop="leaveDate" label="离开时间" header-align="center" align="center" width="180">
            </el-table-column> -->
            <el-table-column prop="guestName" label="客户姓名" header-align="center" align="center" width="180"></el-table-column>
            <el-table-column prop="guestPhone" label="客户手机号" header-align="center" align="center" width="180"></el-table-column>
            <el-table-column prop="guestSourceName" label="客户来源" header-align="center" align="center"></el-table-column>
            <el-table-column label="客房状态" prop="orderStatus">
                <template slot-scope="scope">
                    <el-button size="mini" :style="{'color':'#fff','background': roomStatusColor[scope.row.orderStatus]}">{{!scope.row.orderStatus?'':scope.row.orderStatus|delStatus}}</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</el-card>
</template>

<script>
var that;
import mixinViewModule from "@/mixins/view-module";
export default {
    mixins: [mixinViewModule],
    data() {
        return {
            mixinViewModuleOptions: {
                getDataListURL: "/hotel/report/getOtherConsumeDetailsList",
                getDataListIsPage:true,
            },
            roomStatus: [{
                    val: -1,
                    label: '待确定'
                },
                {
                    val: 1,
                    label: '已预订'
                },
                {
                    val: 2,
                    label: '已入住'
                },
                {
                    val: 3,
                    label: '已退房'
                },
                {
                    val: 4,
                    label: '已取消'
                }
            ],
            roomStatusColor: {
                '-1': '#6faef1',
                '1': '#f29130',
                '2': '#67c23a',
                '3': '#969799',
                '4': '#AAA'
            },
            dataForm: {
                orderStatus: "",
                startDate: '',
                endDate: '',
            },
        };
    },
     filters: {
        delStatus(val) {
            let d = that.roomStatus.filter((item) => item.val == val);
            console.log(d)
            if (d && d[0]) {
                return d[0].label
            }
        }
    },
    //需要在vue的updated周期函数中调用methods里的方法   否则methods里面获取不到页面元素
    updated(){
        this.expandAll();
    },
    created() {
        that = this;
    },
    methods: {
         expandAll () {
            var els = document.getElementsByClassName('el-table__expand-icon')  //获取点击的箭头元素
            for (let i = 0; i < els.length; i++) {
                els[i].click()
            }
        },
    },
};
</script>
